<template>
  <el-dialog title="审核店铺" :visible.sync="isShowDislog">
    <el-form :model="form" label-width="100px">
      <el-form-item label="店铺logo">
        <img :src="form.logo" class="logo"/>
      </el-form-item>
      <el-form-item label="店铺名称">
        <el-input v-model="form.shopName" readonly/>
      </el-form-item>
      <el-form-item label="区域">
        <div class="address">
          <el-input v-model="form.province" readonly/>
          <el-input v-model="form.city" readonly/>
          <el-input v-model="form.district" readonly/>
        </div>
      </el-form-item>
      <el-form-item label="地址">
        <div>{{form.address}}</div>
      </el-form-item>
      <el-form-item label="申请人名称">
        <el-input v-model="form.bossName" readonly/>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="form.bossPhone" readonly/>
      </el-form-item>
      <el-form-item label="申请时间">
        <el-input v-model="form.shopName" readonly/>
      </el-form-item>
      <el-form-item label="店铺说明">
        <el-input v-model="form.shopName" type="textarea" readonly/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="danger" @click="reject">驳回</el-button>
      <el-button type="primary" @click="pass">通过审核</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'shopInfo',
  data () {
    return {
      isShowDislog: false,
      form: {}
    }
  },
  methods: {
    showShopDetail (isShow = true) {
      this.isShowDislog = isShow
    },
    reject () {
      this.$confirm('您正在驳回审核, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$prompt('请输入驳回理由', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
          inputErrorMessage: '必须输入驳回理由'
        }).then(({value}) => {
          console.log('驳回理由是： ', value)
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          this.$http.post(`http://${process.env.NODE_ENV === 'development' ? 'localhost:9009' : 'qiucc.com'}/rentmall/shop/update`, {
            form: {
              id: this.form.id,
              auditReason: value,
              status: 3
            }
          }).then(res => {
            console.log('驳回请求')
            console.log(res)
            if (res.body.code === 200) {
              this.$message({
                type: 'success',
                message: res.body.message,
                onClose: () => {
                  console.log('执行到这里')
                  this.showShopDetail(false)
                  this.$emit('onClose')
                }
              })
            }
          }).catch(err => {
            console.error(err)
            this.$message({
              type: 'error',
              message: '操作失败'
            })
          }).finally(() => loading.close())
        })
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '已取消删除'
        })
      })
    },
    pass () {
      this.$confirm('您正在通过审核, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.$http.post(`http://${process.env.NODE_ENV === 'development' ? 'localhost:9009' : 'qiucc.com'}/rentmall/shop/update`, {
          form: {
            id: this.form.id,
            status: 2
          }
        }).then(res => {
          console.log('通过审核')
          console.log(res)
          if (res.body.code === 200) {
            this.$message({
              type: 'success',
              message: res.body.message,
              onClose: () => {
                this.showShopDetail(false)
                this.$emit('onClose')
              }
            })
          }
        }).catch(err => {
          console.error(err)
          this.$message({
            type: 'error',
            message: '操作失败'
          })
        }).finally(() => loading.close())
      })
    }
  },
  mounted () {},
  beforeUpdate () {
    console.log('props--->')
    console.log(this.$attrs)
    this.form = this.$attrs.info
  }
}
</script>

<style lang="less">
.logo {
  width: 80px;
  height: 80px;
  background-color: #EFEFEF;
}
.address {
  .el-input {
    width: 30%;
  }
}
</style>
